<template>
	<div class="charts">
		<Echarts :option="option" theme="custom"></Echarts>
	</div>
</template>

<script lang="ts">
import { Component, Vue } from 'vue-property-decorator'
import Echarts from '@/components/echarts/index.vue'
import { Option } from '@/types/echarts'

@Component({
	components: {
		Echarts
	}
})
export default class DataView extends Vue {
	private option: Option | null = null

	mounted() {
		const option = {
			title: {
				text: ''
			},
			tooltip: {
				trigger: 'axis',
				// formatter:'{c}',
				axisPointer: {
					type: 'cross',
					trigger: 'axis',
					axisPointer: {
						// 坐标轴指示器，坐标轴触发有效
						type: 'shadow' // 默认为直线，可选为：'line' | 'shadow'
					}
				},
				transitionDuration: 0
			},
			legend: {
				data: [],
				icon: 'rect',
				bottom: 0,
				type: 'scroll'
			},
			grid: {
				left: '2%',
				right: '2%',
				bottom: '12%',
				containLabel: true
			},
			xAxis: {
				type: 'category',
				boundaryGap: true,
				data: [
					'2021-08-12',
					'2021-08-13',
					'2021-08-14',
					'2021-08-15',
					'2021-08-16',
					'2021-08-17',
					'2021-08-18'
				],
				axisTick: {
					show: false
				}
			},
			yAxis: {
				type: 'value'
			},
			series: [
				{
					data: [820, 932, 901, 934, 1290, 1330, 1320],
					type: 'line',
					smooth: true
				}
			]
		}
		this.option = option
	}
}
</script>

<style lang="scss" scoped>
.charts {
	width: 600px;
	height: 400px;
}
</style>
